<template>
  <div>
    <el-form inline>
      <el-form-item>
        <el-input placeholder="角色名称" v-model="userName" />
      </el-form-item>
      <el-button type="primary" @click="inquiry">查询</el-button>
      <el-button @click="emptyHandler">清空</el-button>
    </el-form>
    <div style="margin: 20px 0">
      <el-button type="primary" @click="increase">添加</el-button>
      <el-button type="danger" @click="deleteMultiple">批量删除</el-button>
    </div>

    <el-table
      :data="rolesList"
      border
      v-loading="loading"
      @selection-change="handleSelectionChange"
      stripe
      style="width: 960px"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="80" align="center">
      </el-table-column>

      <el-table-column label="角色名称" prop="">
        <template v-slot="{ row }">
          <template v-if="row.deleted">
            <el-input v-model="row.roleName" class="edit-input" size="small" />
            <el-button
              class="cancel-btn"
              size="small"
              type="warning"
              @click="cancelEdit(row)"
            >
              取消
            </el-button>
          </template>
          <span v-else>{{ row.roleName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="300" align="center">
        <template v-slot="{ row, $index }">
          <el-button
            size="small"
            type="info"
            icon="el-icon-info"
            title="分配权限"
            @click="jumpPermission(row)"
          />
          <el-button
            size="small"
            type="primary"
            icon="el-icon-check"
            title="确定"
            @click="confirmModification(row)"
          />
          <el-button
            size="small"
            type="primary"
            icon="el-icon-edit-outline"
            title="修改角色"
            @click="modifyTheRole(row, $index)"
          />
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            title="删除角色"
            @click="removeRole(row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="page"
      :total="total"
      :page-size="limit"
      :page-sizes="[5, 10, 20, 30]"
      style="padding: 20px 0"
      layout="prev, pager, next, jumper, ->, sizes, total"
    />
  </div>
</template>

<script>
import roleApi from "@/api/acl/role";
export default {
  name: "Rou",
  data() {
    return {
      loading: false,
      page: 1,
      limit: 5,
      total: 0,
      rolesList: [],
      searchName: "",
      userName: "",
      roleIds: [], //批量选中的状态
      oldRoleName: "",
      updateuserInfo: this.updateuserDate(),
    };
  },
  methods: {
    //获取角色分页列表
    async getPageListAll() {
      try {
        this.loading = true;
        let result = await roleApi.getPageList(this.page, this.limit, {
          roleName: this.searchName,
        });
        this.rolesList = result.data.items;
        this.rolesList.forEach((item) => this.$set(item, "Edit", false));
        this.rolesList.forEach((item) =>
          this.$set(item, "originRoleName", this.userName)
        );
        console.log(result);
        this.total = result.data.total;
        this.loading = false;
      } catch (error) {
        console.log(error);
        this.loading = false;
      }
    },
    //批量删除的功能函数
    async deleteMultiple() {
      try {
        await roleApi.removeRoles(this.roleIds);
        (this.page = 1), this.getPageListAll();
        this.$message({
          type: "success",
          message: "批量删除成功",
        });
      } catch (error) {
        console.log(error);
      }
    },

    //修改角色确定按钮
    confirmModification(row) {
      // if(!row.deleted){
      //   return
      // }
      row.deleted = false;
      this.updateuserInfo = row;
      // this.updateuserInfo.roleName = this.oldRoleName
      this.updateById(this.updateuserInfo);
      this.updateuserDate();
      this.getPageListAll();
      this.$forceUpdate();
      console.log(this.updateuserInfo);
    },
    //更新一个角色
    updateuserDate() {
      return {
        id: "",
        gmtCreate: "",
        gmtModified: "",
        deleted: false,
        roleName: "",
        remark: null,
      };
    },
    async updateById(role) {
      try {
        await roleApi.updateById(role);
      } catch (error) {
        console.log(error);
      }
    },
    //取消修改
    cancelEdit(row) {
      row.deleted = false;
      row.roleName = row.originRoleName;
    },
    //修改角色
    modifyTheRole(row, index) {
      (this.oldRoleName = row.roleName), (row.deleted = true);
    },

    //跳转权限页面
    jumpPermission(row) {
      this.$router.push(`/acl/role/auth?id=${row.id}&roleName=${row.roleName}`);
    },
    //全选
    handleSelectionChange(nva) {
      this.roleIds = nva.map((item) => item.id);
    },
    //添加
    increase() {
      this.$prompt("请输入新名称", "添加角色", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: "",
        inputErrorMessage: "不能为空",
      })
        .then(({ value }) => {
          roleApi.save({ roleName: value }).then(() => {
            this.getPageListAll();
          });
          this.$message({
            type: "success",
            message: "添加角色成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消添加角色",
          });
        });
    },
    //搜索
    inquiry() {
      this.searchName = this.userName;
      this.getPageListAll();
    },
    //清空输入框
    emptyHandler() {
      this.userName = "";
      this.searchName = "";
      this.getPageListAll();
    },
    //删除某个角色
    async removeRoleList(id) {
      try {
        await roleApi.removeById(id);
        this.getPageListAll();
      } catch (error) {
        console.log(error);
      }
    },
    //删除角色
    removeRole(row) {
      this.removeRoleList(row.id);
      this.$message({
        message: "删除角色成功",
        type: "success",
      });
    },
    //分页器
    handleCurrentChange(val) {
      this.page = val;
      this.getPageListAll();
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getPageListAll();
    },
  },
  mounted() {
    this.getPageListAll();
  },
};
</script>

<style scoped>
</style>